<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        $(function () {
            //给全选绑定单击事件
            $("#checkAll").click(function () {
                $(":checkbox").prop("checked",true);
            })
            //给全不选绑定单击事件
            $("#checkNo").click(function () {
                $(":checkbox").prop("checked",false);
            })
            //给反选绑定单击事件
            $("#checkFan").click(function () {
                $(":checkbox[name='item']").each(function () {
                    this.checked = !this.checked;
                })
                //遍历完后判断是否满选
                var Allcount = $(":checkbox[name='item']").length;
                var Checkcount = $(":checkbox[name='item']:checked").length;
                // if (Allcount == Checkcount){
                //     $(":checkbox[name='All']").prop("checked",true);
                // }else{
                //     $(":checkbox[name='All']").prop("checked",false);
                // }
                $(":checkbox[name='All']").prop("checked",Allcount == Checkcount);
            })
            //提交
            $("#sendBtn").click(function () {
                $(":checkbox[name='item']:checked").each(function () {
                    alert(this.value);
                });
            })
            $("#checkedAllBox").click(function () {
                $(":checkbox[name='item']").prop("checked",this.checked);
            })
            //给全部球类绑定点击事件
            $(":checkbox[name='item']").click(function () {
                var Allcount = $(":checkbox[name='item']").length;
                var Checkcount = $(":checkbox[name='item']:checked").length;
                $(":checkbox[name='All']").prop("checked",Allcount == Checkcount);
            })
        })
    </script>
</head>
<body>
<form>
    你的爱好运动是？<input type="checkbox" name="All" id="checkedAllBox">全选/全不选<br>
    <input type="checkbox" name="item" value="足球">足球
    <input type="checkbox" name="item" value="篮球">篮球
    <input type="checkbox" name="item" value="羽毛球">羽毛球
    <input type="checkbox" name="item" value="乒乓球">乒乓球
    <br>
    <input type="button" id="checkAll" value="全选">
    <input type="button" id="checkNo" value="全不选">
    <input type="button" id="checkFan" value="反选">
    <input type="button" id="sendBtn" value="提交">


</form>

</body>
</html>